<template>
	<div :id="uid" ref="echartsContainer" :style="myStyle"></div>
</template>
<script setup lang="ts">
import {onBeforeMount,onMounted,ref} from "vue"
import * as echarts from 'echarts';
// 因为是封装的组件，会多次调用，id不能重复，要在初始化之前写，不然会报错dom未定义
let uid = ref<string>('');
const echartsContainer = ref()
onBeforeMount(() =>
{
	uid.value = `echarts-uid-${Date.now()}`;
});
 
onMounted(() =>
{
	// let myChart = echarts.init(document.getElementById(uid.value) as HTMLElement);
  let myChart:any = null;
  
  if(echartsContainer.value){
     myChart = echarts.init(echartsContainer.value);
  }
	// 在template中可以直接取props中的值，但是在script中不行，因为script是在挂载之前执行的
	myChart.setOption(props.myOption, {
		notMerge: true, //不和之前的option合并
	});
 
	// 监听页面的大小
	window.addEventListener('resize', () =>
	{
		setTimeout(() =>
		{
			myChart?.resize({
				animation: {
					duration: 300,
				},
			});
		}, 300);
	});
});
 
const props = defineProps({
	myStyle: {
		type: Object,
		default: () => ({
			width: '100%',
			height: '100%',
			color: 'white'
		}),
	},
	myOption: {
		type: Object,
		default: () => ({}),
		required: true,
	},
});

</script>


<style scoped>

</style>
